<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color:saddlebrown;
        }
    </style>
</head>
<body>
    <script>
        console.log(window.name);
        var a = 'aa';
        console.log(window.a);
        /* window.onload = function(){
            alert('11');
        }
        window.onload = function(){
            alert('22');
        } */
        /* window.addEventListener('load',function(){
            alert('33');
        })
        document.addEventListener('DOMContentLoaded',function(){
            alert('44');
        }) 
            //先执行DOMContentLoaded
            //在执行load
        */
    </script>
    <button>a</button>
    <script>
        //浏览器窗口变化事件
        window.addEventListener('load',function(){
            var div = document.querySelector('div');
            window.addEventListener('resize',function(){
                if(window.innerWidth <= 800){
                    div.style.display = 'none';
                }else{
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>
    <button>开始计时器</button>
    <button>关闭计时器</button>
    <script>
        var btn = document.querySelectorAll('button');
        var timer = null;
        btn[1].addEventListener('click',function(){
            timer = setInterval(function(){
                console.log('1');
                
            },1000)
        })
        btn[2].addEventListener('click',function(){
            clearInterval(timer);
        })
    </script>
    <div>
        <p>
            发送短信：<input type="text">
            <button class="btn">发送</button>
        </p>
    </div>
    <script>
        //倒计时发短信
        var btn = document.querySelector('.btn');
        var index = 3;
        btn.addEventListener('click',function(){
            this.disabled = true;
            var timer = setInterval(function(){
                if(index == 0){
                    clearInterval(timer);
                    btn.innerHTML = '发送';
                    btn.disabled = false;
                    index = 3;
                }else{
                    btn.innerHTML = '还剩下'+index+'秒';
                    index--;
                }
            },1000);
        })
    </script>
    <script>
        //this的指向
        //1.
        console.log(this);//指向window
        setTimeout(function(){
            console.log(this);//只想window
            
        },1000);
        //2.
        var o = {
            sayHi: function(){
                console.log(this);//指向方法的调用者 o
                
            }
        }
        o.sayHi();//输出 o
        //3.
        var btn = document.querySelector('button');
        btn.onclick = function(){
            console.log(this);//this指向这个调用者btn元素
            
        }
        btn.addEventListener('click',function(){
            console.log(this);//this指向这个调用者btn元素
            
        })
    </script>
    <div class="hrefBaiDu">

    </div>
    <script>
        var div = document.querySelector('.hrefBaiDu');
        var times = 5;
        var timer = setInterval(function(){
            if(times == 0){
                window.location.href = 'http://baidu.com';
            }
            div.innerHTML = '将在'+times+'秒后跳转到百度；';
            times--;
        },1000);
    </script>
</body>
</html>